<template>
  <div class="product-detail">
    <div class="container">
      <!-- 商品图片轮播 -->
      <div class="product-gallery">
        <img :src="product.coverImage" :alt="product.name" class="main-image">
      </div>

      <!-- 商品信息 -->
      <div class="product-info">
        <h1 class="product-title">{{ product.name }}</h1>
        <div class="product-price">
          <span class="current-price">¥{{ product.price }}</span>
          <span class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</span>
        </div>

        <div class="product-meta">
          <span>销量: {{ product.sales }}</span>
          <span>库存: {{ product.stock }}</span>
        </div>

        <div class="product-actions">
          <button class="btn btn-primary">加入购物车</button>
          <button class="btn btn-secondary">立即购买</button>
        </div>
      </div>

      <!-- 商品详情 -->
      <div class="product-content">
        <h2>商品详情</h2>
        <div v-html="product.detail"></div>
      </div>

      <!-- 商品评价 -->
      <div class="product-reviews">
        <h2>商品评价</h2>
        <div v-if="reviews.length > 0">
          <div v-for="review in reviews" :key="review.id" class="review-item">
            <div class="review-user">
              <img :src="review.avatar" class="avatar">
              <span class="username">{{ review.username }}</span>
            </div>
            <div class="review-content">
              <div class="rating">
                <span v-for="i in 5" :key="i" :class="{'active': i <= review.rating}">★</span>
              </div>
              <p class="comment">{{ review.comment }}</p>
              <div class="review-time">{{ formatDate(review.createdAt) }}</div>
            </div>
          </div>
        </div>
        <div v-else class="no-reviews">
          暂无评价
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const productId = route.params.id

const product = ref({
  id: productId,
  name: '商品名称',
  coverImage: 'https://via.placeholder.com/800x600',
  price: 99.00,
  originalPrice: 129.00,
  sales: 100,
  stock: 50,
  detail: '<p>这里是商品详情内容</p>'
})

const reviews = ref([])

const fetchProduct = async () => {
  try {
    // 实际项目中替换为API调用
    // const res = await axios.get(`/api/products/${productId}`)
    // product.value = res.data
  } catch (error) {
    console.error('获取商品详情失败:', error)
  }
}

const fetchReviews = async () => {
  try {
    // 模拟评价数据
    reviews.value = [
      {
        id: 1,
        username: '用户1',
        avatar: 'https://via.placeholder.com/50',
        rating: 4,
        comment: '商品质量很好，物流也很快，非常满意！',
        createdAt: '2023-05-15'
      },
      {
        id: 2,
        username: '用户2',
        avatar: 'https://via.placeholder.com/50',
        rating: 5,
        comment: '已经第二次购买了，性价比很高，推荐！',
        createdAt: '2023-05-10'
      }
    ]
    // 实际项目中替换为API调用
    // const res = await axios.get(`/api/products/${productId}/reviews`)
    // reviews.value = res.data
  } catch (error) {
    console.error('获取评价失败:', error)
  }
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString()
}

onMounted(() => {
  fetchProduct()
  fetchReviews()
})
</script>

<style scoped>
.product-detail {
  padding: 20px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.product-gallery {
  background: #f8f8f8;
  border-radius: 8px;
  overflow: hidden;
}

.main-image {
  width: 100%;
  height: auto;
  display: block;
}

.product-info {
  padding: 20px;
}

.product-title {
  font-size: 24px;
  margin-bottom: 15px;
}

.product-price {
  margin-bottom: 20px;
}

.current-price {
  font-size: 28px;
  color: #f56c6c;
  font-weight: bold;
}

.original-price {
  font-size: 16px;
  color: #999;
  text-decoration: line-through;
  margin-left: 10px;
}

.product-meta {
  margin: 20px 0;
  color: #666;
}

.product-meta span {
  margin-right: 15px;
}

.product-actions {
  display: flex;
  gap: 15px;
}

.product-content {
  grid-column: 1 / -1;
  margin-top: 30px;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
  
  .review-item {
    flex-direction: column;
  }
  
  .review-user {
    width: 100%;
    flex-direction: row;
    margin-bottom: 10px;
  }
  
  .avatar {
    margin-right: 10px;
    margin-bottom: 0;
  }
}

.product-reviews {
  grid-column: 1 / -1;
  margin-top: 30px;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 8px;
}

.review-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.review-user {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 5px;
}

.username {
  font-size: 14px;
  color: #666;
}

.review-content {
  flex: 1;
}

.rating {
  color: #ffc107;
  font-size: 18px;
  margin-bottom: 5px;
}

.rating span {
  color: #ddd;
}

.rating span.active {
  color: #ffc107;
}

.comment {
  margin: 10px 0;
  line-height: 1.6;
}

.review-time {
  font-size: 12px;
  color: #999;
}

.no-reviews {
  text-align: center;
  color: #999;
  padding: 20px;
}
</style>